<template lang="html">
 <div class="main">
   <panel title="年度出访情况 /" class="panel">
     <router-link slot="left" style="font-size: 16px;color: #000; font-family: 新宋体;"  :to="{ path: '/warn/index'}">近5年各类国家图形分析报表</router-link>
     <router-link style="font-size: 16px;color: #000; font-family: 新宋体;" slot="right" :to="{ path: '/warn/visitTable'}">表格分析</router-link>
     <div class="body">
         <div class="map" id="hn_country_chart">
         </div>
     </div>
   </panel>
 </div>
</template>

<script>
import panel from '@/components/panel.vue';
export default {
  data () {
    return {
      loading: false,
      chart: null
    };
  },
  components: {
    panel
  },
  watch: {
  },
  methods: {
    buildSeries (obj) {
      let series = {
        type: 'pie',
        radius: ['38%', '20%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '13',
              fontWeight: 'bold'
            }
          }
        },
        itemStyle: {
          emphasis: {
            show: true,
            shadowColor: 'rgba(100, 100, 100, 0.5)',
            shadowOffsetX: -5,
            shadowBlur: 13
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        }
      };
      return Object.assign(obj, series);
    },
    draw (data, type) {
      let chart = this.chart;
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} 人({d}%)'
        },
        legend: {
          // orient: 'vertical',
          orient: 'horizontal',
          x: 'center',
          data: type
        },
        color: type.map(d => {
          return `rgb(${this.rnd(0, 255)}, ${this.rnd(0, 255)}, ${this.rnd(0, 255)})`;
        }),
        series: [
          this.buildSeries({
            name: '2018年团次',
            center: ['30%', '30%'],
            width: '40%',
            max: 40,
            data: data[0].data.filter(d => ['自组团', '自组双跨团', '参加双跨团'].findIndex(dd => dd === d.type) !== -1).map(d => {
              return {name: d.type, value: d.num};
            })
          }),
          this.buildSeries({
            name: '2017年团次',
            center: ['30%', '70%'],
            data: data[1].data.filter(d => ['自组团', '自组双跨团', '参加双跨团'].findIndex(dd => dd === d.type) !== -1).map(d => {
              return {name: d.type, value: d.num};
            })
          }),
          this.buildSeries({
            name: '2018年人次',
            center: ['50%', '30%'],
            data: data[0].data.filter(d => ['省部级', '厅局级', '处级及以下'].findIndex(dd => dd === d.type) !== -1).map(d => {
              return {name: d.type, value: d.num};
            })
          }),
          this.buildSeries({
            name: '2017年人次',
            center: ['50%', '70%'],
            data: data[1].data.filter(d => ['省部级', '厅局级', '处级及以下'].findIndex(dd => dd === d.type) !== -1).map(d => {
              return {name: d.type, value: d.num};
            })
          }),
          this.buildSeries({
            name: '2018年经费支出',
            center: ['70%', '30%'],
            data: data[0].data.filter(d => ['财政经费', '企事业经费', '科研经费', '外方承担'].findIndex(dd => dd === d.type) !== -1).map(d => {
              return {name: d.type, value: d.num};
            })
          }),
          this.buildSeries({
            name: '2017年经费支出',
            center: ['70%', '70%'],
            data: data[1].data.filter(d => ['财政经费', '企事业经费', '科研经费', '外方承担'].findIndex(dd => dd === d.type) !== -1).map(d => {
              return {name: d.type, value: d.num};
            })
          })
        ]
      };
      chart.setOption(option);
      chart.on('click', (param) => {
        console.log('xxxxxx', param);
        this.$router.push('/warn/country/' + param.seriesName);
      });
    },
    rnd (n, m) {
      return Math.floor(Math.random() * (m - n + 1) + n);
    },
    loadData () {
      // 自组团、自组双跨团、参加双跨团、省部级、厅局级、处级及以下、财政经费、企事业经费、科研经费、外方承担
      let type = ['自组团', '自组双跨团', '参加双跨团', '省部级', '厅局级', '处级及以下', '财政经费', '企事业经费', '科研经费', '外方承担'];
      let data = [
        {
          year: '2018',
          data: [
            {
              type: '自组团',
              num: '200'
            }, {
              type: '自组双跨团',
              num: '200'
            }, {
              type: '参加双跨团',
              num: '200'
            }, {
              type: '省部级',
              num: '200'
            }, {
              type: '厅局级',
              num: '200'
            }, {
              type: '处级及以下',
              num: '200'
            }, {
              type: '财政经费',
              num: '200'
            }, {
              type: '企事业经费',
              num: '200'
            }, {
              type: '科研经费',
              num: '200'
            }, {
              type: '外方承担',
              num: '200'
            }
          ]
        }, {
          year: '2017',
          data: [
            {
              type: '自组团',
              num: '200'
            }, {
              type: '自组双跨团',
              num: '200'
            }, {
              type: '参加双跨团',
              num: '200'
            }, {
              type: '省部级',
              num: '200'
            }, {
              type: '厅局级',
              num: '200'
            }, {
              type: '处级及以下',
              num: '200'
            }, {
              type: '财政经费',
              num: '200'
            }, {
              type: '企事业经费',
              num: '200'
            }, {
              type: '科研经费',
              num: '200'
            }, {
              type: '外方承担',
              num: '200'
            }
          ]
        }
      ];
      // 画图
      this.draw(data, type);
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.chart = this.$echarts.init(document.getElementById('hn_country_chart'));
      window.addEventListener('resize', () => {
        this.chart.resize();
      });
      this.loading = true;
      this.loadData();
    });
  }
};
</script>

<style lang="css" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  .panel {
    height: 100%;
    width: 100%;
    position: relative;
   .body {
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     padding-left: 10px;
     .map {
       padding-top: 15px;
       height: 100%;
       width: 100%;
     }
   }
  }
}

</style>
